<div class="content-section introduction">
    <div class="content-section introduction">
        <div class="feature-intro">
            <h1>Breadcrumb</h1>
            <p>Breadcrumb provides contextual information about page hierarchy.</p>
        </div>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-breadcrumb [model]="items" [home]="home"></p-breadcrumb>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;BreadcrumbModule&#125; from 'primeng/breadcrumb';
import &#123;MenuItem&#125; from 'primeng/api';
</app-code>

            <h5>MenuModel API</h5>
            <p>Breadcrumb uses the common menumodel api to define its items, visit <a [routerLink]="['/menumodel']">MenuModel API</a> for details.</p>

            <h5>Getting Started</h5>
            <p>Breadcrumb requires a collection of menuitems connected to its model property.</p>
            
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class BreadcrumbDemo implements OnInit &#123;

    private items: MenuItem[];
    
    ngOnInit() &#123;
        this.items = [
            &#123;label:'Categories'&#125;,
            &#123;label:'Sports'&#125;,
            &#123;label:'Football'&#125;,
            &#123;label:'Countries'&#125;,
            &#123;label:'Spain'&#125;,
            &#123;label:'F.C. Barcelona'&#125;,
            &#123;label:'Squad'&#125;,
            &#123;label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'&#125;
        ];
    &#125;
&#125;
</app-code>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-breadcrumb [model]="items"&gt;&lt;/p-breadcrumb&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>model</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of menuitems.</td>
                        </tr>
                        <tr>
                            <td>home</td>
                            <td>MenuItem</td>
                            <td>null</td>
                            <td>MenuItem configuration for the home icon.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onItemClick</td>
                            <td>originalEvent: Browser event <br >
                                item: Selected menu item
                            </td>
                            <td>Fired when an item is selected.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-breadcrumb</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-menuitem</td>
                            <td>Menuitem element.</td>
                        </tr>
                        <tr>
                            <td>p-menuitem-text</td>
                            <td>Label of a menuitem.</td>
                        </tr>
                        <tr>
                            <td>p-breadcrumb-chevron</td>
                            <td>Chevron element.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/breadcrumb" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-breadcrumb-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class BreadcrumbDemo implements OnInit &#123;

    items: MenuItem[];
    
    home: MenuItem;
    
    ngOnInit() &#123;
        this.items = [
            &#123;label: 'Computer'&#125;,
            &#123;label: 'Notebook'&#125;,
            &#123;label: 'Accessories'&#125;,
            &#123;label: 'Backpacks'&#125;,
            &#123;label: 'Item'&#125;
        ];
        
        this.home = &#123;icon: 'pi pi-home', routerLink: '/'&#125;;
    &#125;
    
&#125;
</app-code>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-breadcrumb [model]="items" [home]="home"&gt;&lt;/p-breadcrumb&gt;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-breadcrumb-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>